<template>
	<view>
		<view>
			<image class="topImg" :src="downloadBkPic('purposeBg')" mode=""></image>
			<view class="topMsgBox">
				<text>
					1.如有意向请填写信息，我行工作人员将及时与您联系
				</text>
				<text>
					2.我们会对您的信息严格保密
				</text>
			</view>
		</view>
		<view>
			<view class="formItem">
				<text class="bitian">*</text>
				<text class="formTitle">企业名称</text>
				<u-input color="#9C9C9C" maxlength="50" inputAlign="right" placeholderStyle="color:#9c9c9c"
					placeholderClass="plceTXT" placeholder="请输入企业名称" v-model="formMsg.enterpriseName" clearable
					border="none"></u-input>
			</view>
			<view class="formItem">
				<text class="bitian"></text>
				<text class="formTitle">统一社会信用代码</text>
				<u-input color="#9C9C9C" maxlength="18" inputAlign="right" placeholderStyle="color:#9c9c9c"
					placeholderClass="plceTXT" placeholder="请输入统一社会信用代码" v-model="formMsg.uscc" clearable
					border="none"></u-input>
			</view>
			<view class="formItem">
				<text class="bitian">*</text>
				<text class="formTitle">联系方式</text>
				<!-- console.log(uni.$u.test.mobile('13845678900')); -->
				<u-input color="#9C9C9C" inputAlign="right" type="number" placeholderStyle="color:#9c9c9c"
					placeholderClass="plceTXT" placeholder="请输入联系电话" v-model="formMsg.phone" clearable
					border="none"></u-input>
			</view>
			<view class="formItem">
				<text class="bitian">*</text>
				<text class="formTitle">联系人</text>
				<u-input color="#9C9C9C" maxlength="20" inputAlign="right" placeholderStyle="color:#9c9c9c"
					placeholderClass="plceTXT" placeholder="请输入联系人姓名" v-model="formMsg.contact" clearable
					border="none"></u-input>
			</view>
			<!-- <view class="formItem">
				<text class="bitian">*</text>
				<text class="formTitle">所在地区</text>
				<pickerAddress style="color: #9C9C9C;font-size: 30rpx;" @change="onPickerChange">{{formMsg.location}}
				</pickerAddress>
			</view> -->
			<!-- <u-input inputAlign="right" placeholderClass="plceTXT" placeholder="请选择所在地区" v-model="formMsg.location"
				clearable border="none"></u-input> -->
			<!-- <view class="addressBox">
				<u-textarea color="#9C9C9C" border="none" cursorSpacing="270" v-model="formMsg.address2"
					placeholder="请输入所在地区具体位置，例：XX街，XX号"></u-textarea>
			</view> -->

			<view class="jutiBox">
				<text class="formTitle">具体需求</text>
				<u-textarea color="#9C9C9C" height="140" maxlength='500' autoHeight adjustPosition border="none"
					cursorSpacing="150" v-model="formMsg.demand" @input="onTextareaInput"
					placeholder="请输入您的业务意向具体需求"></u-textarea>
				<view class="bottomNum">
					{{currentNum}}/500
				</view>
			</view>
		</view>

		<view :class="btnCanClick?'btnBox':'btnBox darkBg'" @click="onSubmitClick">
			确认提交意向
		</view>

		<u-modal :show="isConfirmShow" width="550rpx" title="提示" @confirm="cancleConfirmModal"
			content='信息登记成功，我行工作人员将尽快与您联系，谢谢。'></u-modal>
	</view>
</template>

<script>
	import pickerAddress from "@/components/wangding-pickerAddress/wangding-pickerAddress.vue"
	import {
		insertRegistration
	} from "@/apis/index.js"
import { downloadBkPic } from "../../utils/util";


	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				formMsg: {
					enterpriseName: '',
					phone: '',
					contact: '',
					location: '请选择所在地区',
					address2: '',
					demand: '',
					uscc: ''
				},
				currentNum: 0,
				btnCanClick: false,
				isConfirmShow: false,
				businessType: '',
				businessId: '',
			};
		},
		watch: {
			formMsg: {
				handler(val) {
					if (val.enterpriseName && val.phone && val.contact) {
						this.btnCanClick = true
					} else {
						this.btnCanClick = false
					}
				},
				immediate: true,
				deep: true
			}
		},
		onLoad(option) {
			this.businessType = option.type
			this.businessId = option.id
		},
		onShow() {
			let phoneVal = uni.getStorageSync('phone').split('')
			phoneVal.splice(3, 4, '****')
			this.formMsg.phone = phoneVal.join('')
		},
		methods: {
			downloadBkPic,
			async confirmPermission() {
				let that = this
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: '提示',
						content: '系统将根据您填写的企业名称或目前位置，匹配合适的客户经理尽快与您联系。请确认是否开启定位。',
						success({confirm}) {
							if (confirm) {
								resolve(true)
							} else {
								that.btnCanClick = true
								resolve(false)
							}
						}
					})					
				})

			},
			async isOpenLocation() {
				let that = this
				return new Promise((resolve, reject) => {
					uni.getLocation({
						isHighAccuracy: true,
						success(res) {
							resolve(res)
						},
						fail(err) {
							if (err.errMsg == 'getLocation:fail auth deny') {
								reject('用户已拒绝地理位置权限，请在右上角设置开启位置权限')
								that.btnCanClick = true
							}
							reject(err.errMsg)
						}
					})
				})
			},
			onTextareaInput(val) {
				if (val.length > 500) {
					this.formMsg.demand = val = val.substr(0, 500)
					this.$forceUpdate()
				}
				this.currentNum = val.length
			},
			onPickerChange(data) {
				this.formMsg.location = data.data.join('')
				console.log(data.data.join(''))
			},
			cancleConfirmModal() {
				this.isConfirmShow = false

				uni.navigateBack({
					delta: 1
				})
			},
			async onSubmitClick() {
				if (!this.btnCanClick) {
					return
				}
				this.btnCanClick = false
				this.formMsg.enterpriseName = uni.$u.trim(this.formMsg.enterpriseName)
				this.formMsg.contact = uni.$u.trim(this.formMsg.contact)
				this.formMsg.demand = uni.$u.trim(this.formMsg.demand)
				this.formMsg.uscc = uni.$u.trim(this.formMsg.uscc)

				if (!this.formMsg.enterpriseName) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none',
						duration: 2000
					})
					return
				}

				if (this.formMsg.phone.indexOf('*') == -1 && !uni.$u.test.mobile(this.formMsg.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.formMsg.contact) {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// if (this.formMsg.location == '请选择所在地区') {
				// 	uni.showToast({
				// 		title: '请选择地区',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				let latitude,longitude
				const result = await this.confirmPermission()
				if (result) {
					try {
						const rows = await this.isOpenLocation()
						console.log('rows: ', rows);
						latitude = rows.latitude
						longitude = rows.longitude
					} catch (error) {
						this.btnCanClick = true
						uni.showToast({
							icon: 'none',
							title: error,
							duration: 2000
						})	
						return
					}
				} else {
					return
				}

				const params = {
					...this.formMsg,
					businessId: this.businessId,
					businessType: this.businessType,
					longitude,
					latitude
				}
				if(this.formMsg.phone.indexOf('*') != -1){
					params.phone = uni.getStorageSync('phone')
				}

				uni.showLoading({
					title: '提交中..'
				})
				insertRegistration(params).then(res => {
					console.log('res: ', res);
					if (res && res.code == '00000000') {
						uni.hideLoading()
						this.isConfirmShow = true
						// uni.showToast({
						// 	title: '信息登记成功，我行工作人员将尽快与您联系',
						// 	icon: 'none',
						// 	duration: 2000
						// })
						// setTimeout(()=>{
						// 	uni.navigateBack({delta: 1})
						// },2000)
					}
				}).finally(() => {
					// uni.hideLoading()
					this.btnCanClick = true
				})

			}
		}
	}
</script>

<style lang="scss">
	.topImg {
		width: 100%;
		height: 120rpx;
	}

	.topMsgBox {
		padding: 30rpx;
		box-sizing: border-box;
		color: #9C9C9C;
		background-color: #fafafa;
		margin-top: -6rpx;

		&>text {
			display: block;
			font-size: 28rpx;
		}
	}

	.formItem {
		padding: 0rpx 30rpx;
		border-bottom: 1rpx solid #FAFAFA;
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		height: 100rpx;
		box-sizing: border-box;
		line-height: 100rpx;
		position: relative;

		.formTitle {
			font-size: 32rpx;
		}

		.bitian {
			position: absolute;
			top: 6rpx;
			left: 12rpx;
			color: #F56C6C;
		}

		/deep/ .plceTXT {
			text-align: right;
			color: #9C9C9C;
		}

		/deep/ .u-input {
			// width: 60%;
			padding-left: 20rpx !important;
		}
	}

	.addressBox {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.jutiBox {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
		position: relative;

		.bottomNum {
			position: absolute;
			font-size: 24rpx;
			color: #606266;
			bottom: 14rpx;
			right: 30rpx;
		}
	}

	.btnBox {
		height: 100rpx;
		width: 100%;
		color: #fff;
		text-align: center;
		background-color: #00BF5B;
		line-height: 100rpx;
		font-size: 32rpx;
		margin-top: 70rpx;
		font-weight: 700;
	}

	.darkBg {
		background-color: #E2E2E2;
		color: #9C9C9C;
	}
</style>